<script setup>
import {reactive, ref} from 'vue'
import { useRouter } from 'vue-router';
import {  Search } from '@element-plus/icons-vue'
import { getCurrentInstance } from 'vue'; 
import tools from '../tools/tools.js'
const router = useRouter()
const{proxy} = getCurrentInstance()
// 搜索框数据
const input = ref('')
//卡片的显示
const boxisShow = ref(false)
//搜索框默认推荐数据
const defaultSearch = ref('')
//卡片数据
const cardData = reactive({})
//默认推荐关键词请求
if(defaultSearch.value){
}else{
    proxy.$https.defaultSearch()
    .then((res)=>{
        defaultSearch.value = res.data.data.realkeyword
    })
}
// 拿热搜列表数据，渲染卡片,提前缓存
if(cardData.data){}
else{
    proxy.$https.hotSearch()
   .then((res)=>{
    cardData.data=res.data.data
})
}
//获取焦点的处理
function getfocus (){
    boxisShow.value=true
}

const searchSuggest = reactive({})
//创建节流函数
const throttle = tools.throttle(getSearchSuggest,100)
const flag = ref(false)
function getSearchSuggest(){
    if(input.value==='')return
    flag.value = false
    // 在输入框输入的处理
    proxy.$https.searchSuggest(input.value)
    .then((res)=>{
        searchSuggest.value = res.data.result
        flag.value = true
    })
}
//搜索歌曲
function goSongs(idx){
    boxisShow.value = false
    ElNotification({
        message: `<div style="display:flex;align-items: center;"><img width='50px' src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"/><span>正在加载...</span></div>`,
        showClose: false,
        dangerouslyUseHTMLString:true,
        duration:1000
    })
    if(input.value){
        sessionStorage.setItem("songName",searchSuggest.value.songs[idx].name)
        router.push({name:"search",params:{keywords:searchSuggest.value.songs[idx].name}})
    }else{
        sessionStorage.setItem("songName",cardData.data[idx].searchWord)
        router.push({name:"search",params:{keywords:cardData.data[idx].searchWord}})
    }
    
}
//搜索专辑
function going(){
    ElNotification({
        message: `<div style="display:flex;align-items: center;"><img width='50px' src="http://127.0.0.1:5173/src/assets/OIP-C.jpg"/><span>专辑部分尚未开发，点击歌单部分试试吧！</span></div>`,
        showClose: false,
        dangerouslyUseHTMLString:true,
        duration:2000
    })
}
//搜索歌单
function goSongList(idx){
    //searchSuggest.value.playlists[idx].id为点击歌单的id，可以通过路由传，也可以通过自定义事件传
    router.push({path: "/songCardDetail",query:{id:searchSuggest.value.playlists[idx].id}})
    console.log(searchSuggest.value.playlists[idx].id)
}
document.addEventListener("click",function(){
    boxisShow.value=false
})
</script>

<template>
 <el-input 
        @input="throttle"
        @focus="getfocus($event)"
        @click.stop="getfocus($event)"
        v-model.trim="input" 
        :placeholder="defaultSearch" 
        clearable
        :prefix-icon="Search"
         />


     <el-scrollbar  v-if="!input" v-show="boxisShow" class="box" >
         <el-card  class=" box-card">


            <template #header>
            <div class="card-header">
                <span id="spanfont">热搜列表</span>
            </div>
            </template>
            <div 
                @click="goSongs(idx)"
                :keyword="item.searchWord"
                v-for="(item,idx) in cardData.data" 
                :key="idx" 
                class="text item">
                <span>{{ idx+1 }}</span>
                {{ item.searchWord}}
                <span id="spanfont">{{ item.score }}</span>
                <el-icon color="red" v-show="item.iconType"><Opportunity /></el-icon>
            </div>
        </el-card>
    </el-scrollbar>
    <!-- //搜索建议 -->
     <el-scrollbar  v-else v-show="boxisShow" class="box" >
         <div v-if="flag">
            <el-card  class=" box-card">
            <template #header>
            <div class="card-header">
                <el-icon><Headset /></el-icon>
                <span id="spanfont">歌曲</span>
            </div>
            </template>
            <div @click="goSongs(idx)" v-for="(item,idx) in searchSuggest.value.songs" 
                :key="idx" 
                class="text item">
                {{ item.name}}
                <span style="font-size:12px;color:#ccc">-{{item.artists[0].name}}</span>
            </div>
        </el-card>
         <el-card  class=" box-card">
            <template #header>
            <div class="card-header">
                <el-icon><Film /></el-icon>
                <span id="spanfont">专辑</span>
            </div>
            </template>
            <div @click.stop="going" v-for="(item,idx) in searchSuggest.value.albums" 
                :key="idx" 
                class="text item">
                {{ item.name}}
                <span style="font-size:12px;color:#ccc">-{{item.artist.name}}</span>
            </div>
        </el-card>
         <el-card  class=" box-card">
            <template #header>
            <div class="card-header">
                <el-icon><Grid /></el-icon>
                <span id="spanfont">歌单</span>
            </div>
            </template>
            <div @click="goSongList(idx)" v-for="(item,idx) in searchSuggest.value.playlists" 
                :key="idx" 
                class="text item">
                {{ item.name}}
            </div>
        </el-card>
         </div>
          <div v-else class="text">
                    <span id="spanfont">搜索中。。。</span>
         </div>
    </el-scrollbar>
</template>

<style scoped>
.el-input{
    width: 260px;
    margin-right: 90px;
    position: relative;
}
.box{
    border-radius: 5px;
    border: 1px solid #ccc;
    position: absolute;
    width: 400px;
    height: 350px;
    bottom:-360px;
    left: -70px;
    z-index: 10;
    background-color: #fff;
    overflow: auto;
    
}
.box-card{
    border-radius: 0;
}
.box span{
    font-size: 20px;
    margin-right: 20px;
}
.box p{
    font-size: 12px;

}
.card-header{
    color: #ccc;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.text{
    font-size: 14px;
    line-height: 40px;
    cursor: pointer;
    padding: 0 20px 5px 20px;
    font-weight: 700;
}
.text:hover{
    background-color: rgba(76, 76, 76);
    color: #fff;
}
.el-card{
    --el-card-padding: 0px;
}

#spanfont{
    color: pink;
    font-size: large;
    display: inline-block;
    margin-bottom: 3px;
    margin-left: 3px;

}
</style>